<template>
  <div>
    我是子组件

    <br />
    <div ref="xxx">{{ msg }}</div>
    <button @click="setMsg">修改msg</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Hello',
      num: 1,
      id: null
    }
  },
  created () {
    console.log('created', this.$refs.xxx)
    this.id = setInterval(() => {
      console.log('hello')
    }, 1000)
  },
  beforeMount () {
    console.log('beforeMount')
  },
  mounted () {
    console.log('mounted', this.$refs.xxx.innerText)
  },
  beforeUpdate () {
    console.log('beforeUpdate', this.$refs.xxx.innerText)
  },
  updated () {
    console.log('updated', this.$refs.xxx.innerText)
  },
  beforeDestroy () {
    console.log('beforeDestroy')
    clearInterval(this.id)
  },
  destroyed () {
    console.log('destroyed')
  },
  methods: {
    setMsg () {
      //   this.num++
      this.msg = Math.random()
    }
  }
}
</script>
<style></style>
